import QtQuick 2.15
import QtQuick.Controls 2.15

// UserCard.qml - 可复用的用户卡片组件
Rectangle {
    id: userCard
    height: 80
    color: "white"

    property var userData
    signal userClicked()

    MouseArea {
        anchors.fill: parent
        onClicked: userCard.userClicked()

        // 点击效果
        onPressed: userCard.color = "#f0f0f0"
        onReleased: userCard.color = "white"
        onCanceled: userCard.color = "white"
    }

    Row {
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.verticalCenter: parent.verticalCenter
        spacing: 15

        // 头像
        Rectangle {
            width: 50
            height: 50
            radius: 25
            color: "#ddd"

            Image {
                anchors.fill: parent
                source: userData.avatar
                fillMode: Image.PreserveAspectCrop
            }

            // VIP标识
            Rectangle {
                visible: userData.hasVip
                width: 16
                height: 16
                radius: 8
                color: "#FFD700"
                anchors.right: parent.right
                anchors.bottom: parent.bottom

                Text {
                    text: "V"
                    color: "white"
                    font.pixelSize: 10
                    font.bold: true
                    anchors.centerIn: parent
                }
            }
        }

        // 用户信息
        Column {
            anchors.verticalCenter: parent.verticalCenter
            spacing: 5

            Text {
                text: userData.username
                font.pixelSize: 16
                font.bold: true
                color: "#333"
            }

            Text {
                text: userData.description
                font.pixelSize: 12
                color: "#666"
                width: 250
                elide: Text.ElideRight
            }
        }
    }

    // 关注按钮
    Rectangle {
        width: 60
        height: 30
        radius: 15
        color: userData.isFollowed ? "#f0f0f0" : "#00A1D6"
        anchors.right: parent.right
        anchors.rightMargin: 15
        anchors.verticalCenter: parent.verticalCenter

        Text {
            text: userData.isFollowed ? "已关注" : "关注"
            color: userData.isFollowed ? "#666" : "white"
            font.pixelSize: 12
            anchors.centerIn: parent
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                userData.isFollowed = !userData.isFollowed
            }
        }
    }

    // 底部分割线
    Rectangle {
        width: parent.width
        height: 1
        color: "#e0e0e0"
        anchors.bottom: parent.bottom
    }
}
